<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8 no-print" type="flex" justify="end">

      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          @click="inputShow=true"
          v-hasPermi="['product:order:detail:orderFinish']"
        >生产数量录入
        </el-button>

      </el-col>
      <el-col :span="1.5" v-show="inputShow">
        <el-button
          type="primary"
          icon="el-icon-check"
          size="mini"
          @click="handleSave"
          v-hasPermi="['product:order:detail:orderSave']"
        >保存
        </el-button>

      </el-col>
      <el-col :span="1.5" v-show="inputShow">
        <el-button
          type="warning"
          icon="el-icon-close"
          size="mini"
          @click="inputShow=false"
        >取消
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-printer"
          size="mini"
          @click="handlePrint1"
          :disabled="inputShow"
          v-hasPermi="['product:order:detail:print']"
        >打 印
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="warning"-->
      <!--          icon="el-icon-download"-->
      <!--          size="mini"-->
      <!--          @click="handleExport1"-->
      <!--          v-hasPermi="['product:order:detail:export']"-->
      <!--        >导 出-->
      <!--        </el-button>-->
      <!--      </el-col>-->
    </el-row>
    <table style="border-collapse:collapse;width:100%;border: 1px solid #000000; font-size: 14px;"
           :cellpadding="5" border="1" ref="print1"
    >
      <thead>
      <tr class="text-center company-name">
        <th colspan="7">宁波普瑞柏生物技术股份有限公司</th>
      </tr>
      <tr class="text-center reagent-command">
        <th colspan="7">试剂分装指令</th>
      </tr>
      <tr>
        <th rowspan="2">品名</th>
        <td align="center" rowspan="2" colspan="2" width="200">
          {{ order.projectName }}<br/>{{ '(' + order.testMethod + ')' }}
        </td>
        <th>配制日期</th>
        <td colspan="2" align="center">{{ order.createTime }}</td>
        <th rowspan="2">要求分装日期</th>
      </tr>
      <tr>
        <th>批号</th>
        <td colspan="2" align="center">{{ order.lotNumber }}</td>
      </tr>
      <tr>
        <th>英文名称</th>
        <th align="center" colspan="2">{{ order.projectCode }}</th>
        <th>有效期</th>
        <td colspan="2" align="center">{{ order.expireDate }}</td>
        <td align="center">{{ order.requirePacTime }}</td>
      </tr>
      <tr>
        <th>优先级</th>
        <th>适用机型</th>
        <th>试剂组成</th>
        <th>装量(ml/瓶)</th>
        <th>计划数量(瓶)</th>
        <th>生产数量(瓶)</th>
        <th>包装瓶</th>
      </tr>
      </thead>
      <tbody class="text-center">
      <template v-for="item of order.reagentOrderLists">
        <td :rowspan="item.reagentOrderListDetails.length+1">
          <el-tag>{{ item.priority }}</el-tag>
        </td>
        <td :rowspan="item.reagentOrderListDetails.length+1">{{ machineTypeFormat(item) }}</td>
        <tr v-for="item2 of item.reagentOrderListDetails">
          <td>{{ reagentTypeFormat(item2) }}</td>
          <td>{{ item2.productVolume }}</td>
          <td>{{ item2.amount }}</td>
          <td>
            <span v-if="!inputShow">{{ item2.productAmount }}</span>
            <el-input-number v-if="inputShow" v-model="item2.productAmount" :min="1"
                             :max="item2.amount"></el-input-number>
          </td>
          <td>{{ item2.bottleType }}</td>
        </tr>
      </template>
      </tbody>
      <template v-for="(item,index) of reagentFormRowCount">
        <tr>
          <template v-for="item2 of reagentFormArr[index]">
            <th align="center">{{ reagentTypeFormat2(item2) }}：</th>
            <td align="left" colspan="2">{{ item2.sum ? item2.sum.toFixed(2) : item2.sum }}</td>
          </template>
          <td></td>
        </tr>
      </template>
      <tfoot>
      <tr>
        <th>指令人</th>
        <td align="center" colspan="3">{{ order.orderUser }}</td>
        <th>接收人</th>
        <td align="center" colspan="2"></td>
      </tr>
      <tr>
        <th>Q A</th>
        <td align="center" colspan="3"></td>
        <th>日 期</th>
        <td align="center" colspan="2"></td>
      </tr>
      </tfoot>
    </table>
    <el-divider class="mb24"/>
    <el-row :gutter="10" class="mb8 no-print" type="flex" justify="end">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-printer"
          size="mini"
          @click="handlePrint2"
          :disabled="inputShow"
          v-hasPermi="['product:order:detail:print']"
        >打 印
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="warning"-->
      <!--          icon="el-icon-download"-->
      <!--          size="mini"-->
      <!--          @click="handleExport2"-->
      <!--          v-hasPermi="['product:order:detail:export']"-->
      <!--        >导 出-->
      <!--        </el-button>-->
      <!--      </el-col>-->
    </el-row>
    <table style="border-collapse:collapse; width:100%;border: 1px solid #000000;font-size: 14px;"
           :cellpadding="5" border="1" ref="print2">
      <thead>
      <tr class="text-center company-name">
        <th colspan="8">宁波普瑞柏生物技术股份有限公司</th>
      </tr>
      <tr class="text-center reagent-command">
        <th colspan="8">试剂组装指令</th>
      </tr>
      <tr>
        <th rowspan="2">品名</th>
        <td align="center" rowspan="2" colspan="2" width="200">
          {{ order.projectName }}<br/>{{ '(' + order.testMethod + ')' }}
        </td>
        <th>配制日期</th>
        <td align="center" colspan="3">{{ order.createTime }}</td>
        <th rowspan="2">要求分装日期</th>
      </tr>
      <tr>
        <th>批号</th>
        <td align="center" colspan="3">{{ order.lotNumber }}</td>
      </tr>
      <tr>
        <th>英文名称</th>
        <th align="center" colspan="2">{{ order.projectCode }}</th>
        <th align="center">有效期</th>
        <td align="center" colspan="3">{{ order.expireDate }}</td>
        <td align="center">{{ order.requirePacTime }}</td>
      </tr>
      <tr>
        <th>优先级</th>
        <th>适用机型</th>
        <th>货号</th>
        <th>包装规格/盒</th>
        <th>计划数量/盒</th>
        <th>生产数量/盒</th>
        <th>条码内容</th>
        <th>组装要求</th>
      </tr>
      </thead>
      <tbody class="text-center">
      <tr v-for="item of order.reagentOrderLists">
        <td>
          <el-tag>{{ item.priority }}</el-tag>
        </td>
        <td>{{ machineTypeFormat(item) }}</td>
        <td>{{ item.itemNo }}</td>
        <td>{{ item.reagentSpec }}</td>
        <td>{{ item.amount }}</td>
        <td>
          <span v-if="!inputShow">{{ item.productAmount }}</span>
          <el-input-number v-if="inputShow" v-model="item.productAmount" :min="1"
                           :max="item.amount"></el-input-number>
        </td>
        <td>{{ getBarCodeRemark(item) }}</td>
        <td>说明书：1张/盒</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <th>其他岗位操作规程:</th>
        <td colspan="7"></td>
      </tr>
      <tr>
        <th align="center">指令人</th>
        <td align="center">{{ order.orderUser }}</td>
        <th>接收人</th>
        <td align="center"></td>
        <th>Q A</th>
        <td align="center"></td>
        <th>日 期</th>
        <td align="center"></td>
      </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
import {getOrder, updateReagentOrderDTO} from "@/api/product/order";

export default {
  name: "detail",
  data() {
    return {
      inputShow: false,
      orderId: undefined,
      order: {},
      // reagentOrderLists: [],
      machineTypeOptions: [],
      reagentTypeOptions: [],
    }
  },
  computed: {
    reagentFormRowCount() {
      return Math.ceil(this.reagentTypeOptions.length / 2)
    },
    reagentFormArr() {
      let arr = [];
      for (let i = 0; i < this.reagentTypeOptions.length; i = i + 2) {
        arr.push(this.reagentTypeOptions.slice(i, i + 2));
      }
      return arr;
    }
  },
  beforeRouteEnter(from, to, next) {
    next(vm => {
      if (vm.$route.query.orderId && !isNaN(vm.$route.query.orderId)) {
        vm.orderId = vm.$route.query.orderId
        vm.getPageForm(vm)
      } else {
        vm.$router.push('/product/order')
      }
    })
  },
  created() {
    this.getDicts("machine_type").then(response => {
      this.machineTypeOptions = response.data;
    });
  },
  methods: {
    handleSave() {
      updateReagentOrderDTO(this.order).then(res => {
        let arr = this.reagentTypeOptions.slice();
        for (let reagentTypeOption of arr) {
          reagentTypeOption.sum = 0
        }
        this.reagentTypeOptions = this.calc2(this.order, arr);
        this.msgSuccess('保存成功');
        this.inputShow = false
      })
    },
    getPageForm(vm) {
      vm.getDicts("reagent_type_flag").then(response => {
        let reagentTypeOptions = response.data;
        reagentTypeOptions.forEach(item => item.sum = 0);
        vm.reagentTypeOptions = reagentTypeOptions;
      }).then(_ => {
        getOrder(vm.orderId).then(res => {
          if (res.code === 200) {
            let arr = vm.reagentTypeOptions.slice();
            let order = res.data;
            vm.order = order;
            vm.reagentTypeOptions = vm.calc(order, arr);
          }
        })
      });

    },
    calc(order, arr) {
      //遍历得到试剂总装量
      let reagentOrderLists = order.reagentOrderLists;
      for (let reagentOrderList of reagentOrderLists) {
        let reagentOrderListDetails = reagentOrderList.reagentOrderListDetails;
        for (let detail of reagentOrderListDetails) {
          let volume = detail.amount * detail.productVolume
          let reagentType = detail.reagentType;
          for (let reagentTypeOption of arr) {
            if (reagentTypeOption.dictValue === reagentType) {
              reagentTypeOption.sum += volume
              break;
            }
          }
        }
      }
      return arr
    },
    calc2(order, arr) {
      //遍历得到试剂总装量
      let reagentOrderLists = order.reagentOrderLists;
      for (let reagentOrderList of reagentOrderLists) {
        let reagentOrderListDetails = reagentOrderList.reagentOrderListDetails;
        for (let detail of reagentOrderListDetails) {
          let volume = detail.productAmount * detail.productVolume
          let reagentType = detail.reagentType;
          for (let reagentTypeOption of arr) {
            if (reagentTypeOption.dictValue === reagentType) {
              reagentTypeOption.sum += volume
              break;
            }
          }
        }
      }
      return arr
    },
    getBarCodeRemark(reagentOrderList) {
      let orderId = reagentOrderList.orderId;
      // getOrderFirstBarcode(orderId)
      //   .then(res => {
      //     console.log(res);
      //   })
      return ''
    },
    // 机型字典翻译
    machineTypeFormat(row, column) {
      return this.selectDictLabel(this.machineTypeOptions, row.machineType);
    },
    // 试剂类型字典翻译
    reagentTypeFormat(row, column) {
      return this.selectDictLabel(this.reagentTypeOptions, row.reagentType);
    },
    reagentTypeFormat2(row, column) {
      return this.selectDictLabel(this.reagentTypeOptions, row.dictValue);
    },
    handlePrint1() {
      this.$print(this.$refs.print1)
    },
    handleExport1() {
      this.msgInfo('这个功能还没做好呢，要等一下哦')
    },
    handlePrint2() {
      this.$print(this.$refs.print2)
    },
    handleExport2() {
      this.msgInfo('这个功能还没做好呢，要等一下哦')
    }
  },
}
</script>
<style>
.company-name {
  font-weight: bolder;
  font-size: 20px;
  letter-spacing: 0.2em;
}

.reagent-command {
  font-weight: bolder;
  font-size: 16px;
  text-align: center;
}
</style>
